<!DOCTYPE html>
<!--
Copyright 2012 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- -->
    <script src="lib/loader.js"></script>
    <script src="lib/Component.js"></script>
    <!-- -->
    <style>
      div, g-A, g-B {
        display: block;
        border: 1px dotted red;
        margin: 8px;
        padding: 8px;
      }
    </style>
    <script>
      change = function() {
        Component.register("g-A", ["A"], {
          created: function() {
            this.content = ShadowDOM.localQuery(this.shadows.lastChild, "content");
          },
          alter: function() {
            if (this.content.hasAttribute("select") && this.content.attributes.select.value === "#a2") {
              this.content.setAttribute("select", "#a1");
            } else {
              this.content.setAttribute("select", "#a2");
            }
            this.distribute();
            pumper(this);
          }
        });
        Component.upgradeAll();
      }
    </script>
  </head>
  <body onload="change()" onclick="c$[0].alter()">
    <p>Click for effects</p>

    <g-A><span id="a1">Where am I?</span><span id="a2">Where do I go?</span></g-A>

    <template id="A">[A->]<content></content>[<-A]</template>

    <hr/>

    Expected output (also, see console):

    <div>[A-&gt;]<span id="a1">Where am I?</span><span id="a2">Where do I go?</span>[&lt;-A]</div>

  </body>
</html>
